<template>
  <div>
    <div class="cockpitMainModulesTitle">全要素数据归集共享</div>
    <div class="cockpitMainModulesLeft1">
      <div class="cockpitMainModulesTitleBox">实景三维时空大数据底板</div>
      <div class="cockpitMainModulesLeftTitleInfo">
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: red; font-size: 22px">37</strong>类数据主题
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: red; font-size: 22px">270+</strong>个空间国层
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: red; font-size: 22px">21万+</strong>条业务指标
        </div>
      </div>
      <div class="cockpitMainModulesLeftTitleTopContent">
        <el-table :data="tableData1" class="cockpitMainModulesLeftTitleTable cockpitMainModulesLeftTitleTopTable"
          height="100%" :row-class-name="tableRowClassName">
          <el-table-column prop="sjly" align="center" width="250" label="数据来源">
            <template slot-scope="scope">
              <div style="color: rgb(29, 81, 116); font-weight: bold;font-size: 12px;">
                {{ scope.row.sjly }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="spsj" align="center" label="审批数据">
            <template slot-scope="scope">
              <div style="color: rgb(29, 81, 116); font-weight: bold;font-size: 12px;">
                {{ scope.row.spsj }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sjzd" align="center" label="数据字段">
            <template slot-scope="scope">
              <div style="
                  color: rgb(29, 81, 116);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;font-size: 12px;
                ">
                {{ scope.row.sjzd }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="cockpitMainModulesLeft2">
      <div class="cockpitMainModulesTitleBox">黄埔区企业筹建大数据池</div>
      <div class="cockpitMainModulesLeftTitleInfo">
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">7</strong>个业务系统
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">85</strong>个审批事项
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">{{ spbj }}万+</strong>审批办件
        </div>
      </div>
      <div class="cockpitMainModulesLeftTitleInfo">
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">{{ cjqy }}</strong>个筹建企业
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">{{ gyxm }}</strong>个工业项目
        </div>
        <div class="cockpitMainModulesLeftTitleInfoBox">
          <strong style="color: rgb(255, 148, 9); font-size: 22px">{{ jghsj }}万+</strong>条结构化数据
        </div>
      </div>
      <div class="cockpitMainModulesLeftTitleCenterContent">
        <el-table :data="tableData2" class="cockpitMainModulesLeftTitleTable cockpitMainModulesLeftTitleCenterTable"
          height="100%" :row-class-name="tableRowClassName">
          <el-table-column prop="sjly" align="center" width="250" label="数据来源">
            <template slot-scope="scope">
              <div
                style="color: rgb(29, 81, 116); font-weight: bold;font-size: 12px;text-overflow: ellipsis;white-space: nowrap;">
                {{ scope.row.sjly }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="spsj" align="center" label="审批数据">
            <template slot-scope="scope">
              <div
                style="color: rgb(29, 81, 116); font-weight: bold;font-size: 12px;text-overflow: ellipsis;white-space: nowrap;">
                {{ scope.row.spsj }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sjzd" align="center" label="数据字段">
            <template slot-scope="scope">
              <div style="
                  color: rgb(29, 81, 116);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;font-size: 12px;
                ">
                {{ scope.row.sjzd }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="cockpitMainModulesLeft3">
      <div class="cockpitMainModulesTitleBox">数据赋能助力审批提速</div>
      <div class="cockpitMainModulesLeftBottomImg">
        <!-- <img src="../../assets/cockpitImg/数据流图v10.gif" class="cockpitMainModulesLeftBottomImgBox" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetToken, reqGetRightCenterData } from "@/api/data";
export default {
  data() {
    return {
      spbj:0,
      cjqy:0,
      gyxm:0,
      jghsj:0,
      tableData1: [
        {
          sjly: "全国环评管理信息平台",
          spsj: "环评审批数据",
          sjzd: "行业分类、产排污节点及污染治理设施...",
        },
        {
          sjly: "全国排污许可证管理信息平台",
          spsj: "排污许可数据",
          sjzd: "大气污染物排放量、水污染物排放量...",
        },
        {
          sjly: "广东省投资项目在线审批监管平台",
          spsj: "项目备案/核准数据",
          sjzd: "项目名称、项目总投资...",
        },
        {
          sjly: "广州市城乡建设信息交换平台",
          spsj: "施工许可证数据",
          sjzd: "建设规模、合同价格...",
        },
        {
          sjly: "广州市建设工程招投标监督管理综合平台",
          spsj: "招投标备案数据",
          sjzd: "备案号、中标单位...",
        },
        {
          sjly: "广州市工程建设项目竣工联合验收系统",
          spsj: "规划条件核实数据",
          sjzd: "工程名称、规证面积...",
        },
        {
          sjly: "黄埔区、广州开发区行政审批系统",
          spsj: "44项审批事项数据",
          sjzd: "建筑面积、容积率...",
        },
      ],
      tableData2: [
        {
          sjly: "省三线一单平台",
          spsj: "三线一单数据",
          sjzd: "生态空间管控分区、水环境管控区...",
        },
        {
          sjly: "智慧广州时空信息云平台",
          spsj: "现状,上位规划,专项规划数据",
          sjzd: "城市总体规划、控制性详细规划...",
        },
        {
          sjly: "市多规合一平台",
          spsj: "环境数据",
          sjzd: "城市环境总体规划、饮用水源保护区...",
        },
        {
          sjly: "区”有呼必应”平台",
          spsj: "现状数据",
          sjzd: "黄埔三维实景倾斜模型、黄埔区高程模型DEM...",
        },
        {
          sjly: "区应急局,规自局水务局,安全生产委员会",
          spsj: "专项数据",
          sjzd: "两重点一重大项目及控制范围，黄埔区历史建筑数据...",
        },
        {
          sjly: "数据治理",
          spsj: "规划方案数据",
          sjzd: "项目红线、设计方案三维模型...",
        },
      ]
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      }
      if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
    async getToken() {
      let result = await reqGetToken()
      if (result.code === 200) {
        localStorage.setItem('cjsspToken', JSON.stringify(result.data))
      }
    },
    async getRightCenterData() {
      if (localStorage.getItem('cjsspToken') == null) {
        await this.getToken()
      }
      let result = await reqGetRightCenterData()
      if (result.code === 200) {
        this.jghsj = result.data.jghsj
        this.spbj = result.data.spbj
        this.cjqy = result.data.cjqy
        this.gyxm = result.data.gyxm
      }
    }
  },
  beforeMount(){
    this.getRightCenterData()
  },
  mounted(){
  }
};
</script>

<style scoped></style>